<script setup lang="ts">
import { onMounted, ref, provide } from 'vue';
import { SelectEvent, SelectMode } from "../../tool/eventType";
import useSelect from '@/tool/select';



const { isMatchType, canvasEditor, isOne } = useSelect();

const rightDrawerRef = ref<Boolean>(false);

// 保存点击的队形
var clickedObject = null
// canvas管理器
// const canvasEditor = inject('canvasEditor');

onMounted(() => {
    // 注册监听
    canvasEditor.on(SelectEvent.ONE, (opt) => {
        console.log(`output->opt.runtime.toString()`, opt)
        showRightDrawer(true);
        if (opt.type == 'textbox') {

        } else if (opt.type == 'image') {

        }
    })
    canvasEditor.on(SelectEvent.MULTI, (opt) => {
        showRightDrawer(true);
    })
    canvasEditor.on(SelectEvent.CANCEL, (opt) => {
        showRightDrawer(false);
    })
})

// 提供一个方法给子组件注册其方法
provide('registerChildMethod', (method: any) => {
    rightDrawerRef.value = method;
});

const showRightDrawer = (open: Boolean) => {
    if (rightDrawerRef.value) {
        rightDrawerRef.value(open);
    }
}
</script>


<template>
    <Drawer key="rightDrawerRef" direction="right">

        <div class="container">
            <h4>快捷操作</h4>
            <div class="bg-item">
                <!-- <LOCK></LOCK>
                <DEL></DEL> -->
                <lock></lock>
                <Del>nijoa</Del>
                <Clone>clone</Clone>
                <hide>隐藏</hide>
                <edit>编辑</edit>
                <div>oooooo</div>
            </div>
        </div>


    </Drawer>
</template>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: aquamarine;

    .bg-item {
        width: 100%;
        margin-bottom: 5px;
        padding: 5px;
        display: flex;
        flex: 1;
        justify-content: space-between;
        border-radius: 5px;
        background: #f6f7f9;
    }
}
</style>